<template>
  <up-list
    :height="height"
    @scrolltolower="scrolltolower"
  >
    <slot name="header"></slot>
    <slot name="default"></slot>

    <up-empty v-if="!listData.length" type="order" style="margin-top: 30vh;" />

    <up-loadmore :status="status" class="u-p-b-30" />
  </up-list>
</template>

<script>
export default {
  props: {
    requestMethod: {
      type: Function,
      default: () => ()=>{}
    },
    requestParams: {
      type: Object,
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      currentIndex: 0,
      pageIndex: 1,
      pageSize: 30,
      loading: false,
      loadmore: true,
      nomore: false
    }
  },
  computed: {
    listData: {
      get() {
        return this.list
      },
      set(val) {
        this.$emit('update:list', val)
      }
    },
    status() {
      if (this.loading) {
        return 'loading'
      } else if (this.nomore) {
        return 'nomore'
      } else if (this.loadmore) {
        return 'loadmore'
      } else {
        return ''
      }
    }
  },
  methods: {
    scrolltolower() {
      if (this.loadmore && !this.nomore) {
        this.getList()
      }
    },
    async getList() {
      this.loading = true;
      const params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        ...this.requestParams
      }
      const { data } = await this.requestMethod(params)
      
      if (data?.items.length) {
        this.listData = [
          ...this.listData,
          ...data.items
        ]
        this.pageIndex++
        this.loadmore = true
      } else {
        if (this.pageIndex > 1) {
          this.$u.toast('没有更多数据了')
          this.loadmore = false
        } else {
          this.$u.toast('暂无数据')
          this.nomore = true
        }
      }


      this.loading = false;
    },
    reset() {
      this.pageIndex = 1;
      this.listData = []
      this.$nextTick(() => {
        this.getList()
      })
    }
  },
}
</script>

<style lang="scss" scoped>

</style>